<template>
    <div>

        <common-header></common-header>

        <div class="shop-cart-box">
            
            <div class="shop-cart">
                <div class="step-box">
                    <el-card>
                        <el-steps :active="active"  align-center >
                            <!-- @click.native="changeActive(1)" -->
                            <el-step title="Cart" icon="el-icon-shopping-cart-full" ></el-step>
                            <el-step title="Address" icon="el-icon-house" ></el-step>
                            <el-step title="Payment" icon="el-icon-bank-card" ></el-step>
                            <el-step title="Success" icon="el-icon-circle-check"></el-step>
                        </el-steps>
                    </el-card>
                </div>

                <!-- 购物车区域 -->
                <transition name="el-fade-in-linear">
                    <div class="row" v-if="active===1" v-loading="isloading">
                        <div class="col-md-8" v-show="totalPrice>0" >
                            <el-card class="mycard" v-for="i in cartList.length" :key="i" >
                                <div class="card-content" v-if="productList[i-1]">
                                    <div class="item-img">
                                        <img :src="productList[i-1].pic" alt="">
                                    </div>
                                    <div class="card-body" >
                                        <div class="item-name">
                                            <span >{{productList[i-1].productName}}</span>
                                            <p>类别： <span class="item-cate">{{productList[i-1].categoryName}}</span></p>
                                            <p class="item-status">库存：{{productList[i-1].stock}}</p>
                                        </div>
                                        <div class="item-quantity">
                                            <span>数量：</span>
                                            <el-input-number size="mini" v-model="nums[i-1]" @change="changeNum(nums[i-1], cartList[i-1].id)"></el-input-number>
                                        </div>
                                        <div class="item-bottom">
                                            <p class="deliver">Delivery by, Wed Apr 24</p>
                                            <p class="offer">7% off 1 offers Available</p>
                                        </div>
                                    </div>
                                    <div class="item-options">
                                        <div class="item-rating-warp">
                                            <div class="item-rating">
                                                <span></span>
                                                <i class="el-icon-present"></i>
                                            </div>
                                        </div>
                                        <div class="item-cost">
                                            <span class="price">￥{{nums[i-1] * prices[i-1]}}</span>
                                            <div class="shop">
                                                <i class="el-icon-shopping-cart-2"></i>
                                                <span> Free Shipping</span>
                                            </div>
                                        </div>
                                        <div>
                                            <el-button icon="el-icon-close" type="info" plain size="medium" style="margin-bottom:0.5rem;" @click="delCart(productList[i-1].id, cartList[i-1].id)"> 移除 </el-button><br>
                                            <el-button icon="el-icon-shopping-bag-1" type="success" size="medium"> 购买 </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>

                        <div class="col-md-4" v-if="totalPrice>0">
                            <el-card class="order" >
                                <div class="order-head">
                                    <!-- <p class="grey">单据</p> -->
                                    <div class="detail">
                                        <div style="font-weight:600;">单据</div>
                                        <div class="perple"></div>
                                    </div>
                                </div>
                                <div class="order-content">
                                    <div class="bloder">价格详细</div>
                                    <div>
                                        <div class="detail">
                                            <div class="grey">总人名币</div>
                                            <div class="detail-amt">￥{{totalPrice}}</div>
                                        </div>
                                        <div class="detail">
                                            <div class="grey">包折扣</div>
                                            <div class="detail-amt green">￥0.0</div>
                                        </div>
                                        <div class="detail">
                                            <div class="grey">估计税额</div>
                                            <div class="detail-amt">￥0.0</div>
                                        </div>
                                        <!-- <div class="detail">
                                            <div class="grey">EMI Eligibility</div>
                                            <div class="detail-amt perple">Details</div>
                                        </div> -->
                                        <div class="detail">
                                            <div class="grey">运输费用</div>
                                            <div class="detail-amt green">免费</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="order-foot">
                                    <div class="bloder">Total</div>
                                    <div class="order-button"><el-button type="primary" size="medium" style="width:100%;" @click="changeActive(2)"> 提 交 购 物 车 </el-button></div>
                                </div>
                            </el-card>
                        </div>

                        <!-- 空空如也 -->
                        <div class="col-md-12" v-if="cartList.length==0">
                            <el-card>
                                <div class="isEmpyt">
                                    这里空空如也，赶紧去逛逛吧~
                                </div>
                            </el-card>
                        </div>
                    </div>
                </transition>
                <!-- 地址区域 -->
                <transition name="el-fade-in-linear">
                    <div class="row" v-if="active===2">
                        <div class="col-md-8">
                            <el-card>
                                <div class="address-title">
                                    <h5>添加新地址</h5>
                                    <div class="titleWrap">
                                        <p>完成后需要勾选“保存并使用”</p>
                                        <div >
                                            <el-button
                                            type="primary"
                                            size="small"
                                            plain
                                            icon="el-icon-edit"
                                            @click="isEdit()"
                                            >{{opName}}</el-button>
                                            <el-button
                                                v-if="isForm === true"
                                                type="danger"
                                                size="small"
                                                plain
                                                icon="el-icon-circle-close"
                                                @click="isCansel()"
                                            >取消</el-button>
                                        </div>
                                    </div>
                                </div>
                                <form>
                                    <div :class="[isForm ? '': 'isNone']">
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                    <label class="col-form-label-sm">收件人名字:</label>
                                                    <input type="text" class="form-control form-control-sm" v-model="detailForm.receiverName">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label class="col-form-label-sm">收件电话号码:</label>
                                                    <input type="text" class="form-control form-control-sm" v-model="detailForm.receiverMobile">
                                                </div>
                                            </div>
                                        <div class="form-row">
                                                <div class="form-group col-md-12">
                                                    <div><label class="col-form-label-sm">省份地区:</label></div>
                                                    <el-cascader
                                                        style="width:80%;"
                                                        size="small"
                                                        :options="options"
                                                        v-model="selectedOptions"
                                                        @change="handleChange"
                                                    ></el-cascader>
                                                </div>
                                            <!-- <div class="form-group col-md-4">
                                                <label class="col-form-label-sm">省份:</label>
                                                <select id="inputState" class="form-control form-control-sm">
                                                    <option selected>Choose...</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="col-form-label-sm">城市:</label>
                                                <select id="inputState" class="form-control form-control-sm">
                                                    <option selected>Choose...</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="col-form-label-sm">地区:</label>
                                                <select id="inputState" class="form-control form-control-sm">
                                                    <option selected>Choose...</option>
                                                    <option>...</option>
                                                </select>
                                            </div> -->
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-2">
                                                <label class="col-form-label-sm">邮政编码:</label>
                                                <input type="text" class="form-control form-control-sm" id="inputZip" v-model="detailForm.receiverZip">
                                            </div>
                                            <div class="form-group col-md-10">
                                                <label class="col-form-label-sm" >详细地址:</label>
                                                <input type="text" class="form-control form-control-sm" v-model="detailForm.receiverAddress">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 选择地址区域 -->
                                    <div :class="[isForm ? 'isNone': '', 'addresscontain']">
                                        <div class="addressselect" v-for="(item,index) in addArr" :key="index">
                                        
                                            <el-radio v-model="selectAdd" :label="item.id" border @change='selectChange'>
                                                {{item.receiverProvince}} {{item.receiverCity}} {{item.receiverDistrict}} {{item.receiverAddress}}
                                                ({{item.receiverName}} 收) 手机：{{item.receiverMobile}}
                                            </el-radio>
                                        </div>
                                    </div>
                                    <!-- <button type="submit" class="btn btn-primary" style="margin-top:5px;"> 选中并使用 </button> -->
                                </form>
                            </el-card>
                        </div>
                        <div class="col-md-4">
                            <el-card v-if="selectAddress !== null">
                                <div class="address-detail">
                                    <h5>{{selectAddress.receiverName}}</h5>
                                    <span>{{selectAddress.receiverProvince + '/' + selectAddress.receiverCity + '/' + selectAddress.receiverDistrict}}</span>
                                    <p>{{selectAddress.receiverAddress}}</p>
                                    <p>{{selectAddress.receiverMobile}}</p>
                                </div>
                                <hr>
                                <button type="submit" class="btn btn-primary" style="width:100%;" @click="changeActive(3)">应用此地址</button>
                            </el-card>
                        </div>
                    </div>
                </transition>

                <!-- 支付区域 -->
                <transition name="el-fade-in-linear">
                    <div class="row" v-if="active===3">
                        <div class="col-md-8">
                            <el-card>
                                <div class="pay-title">
                                    <h5>付款方式</h5>
                                    <p>一定要点击正确的付款选项</p>
                                    <!-- <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="customRadio0" name="customRadio" class="custom-control-input">
                                        <label class="custom-control-label" for="customRadio0" >
                                            <span>
                                                <img src="../../assets/images/shop/bank.png" style="height:40px;" alt="">
                                                US Unlocked Debit Card 12XX XXXX XXXX 0000
                                            </span>
                                            <span>John Doe</span>
                                            <span>2020/07</span>
                                        </label>
                                    </div>
                                    <div class="input-group mb-3 col-md-6">
                                        <input type="text" class="form-control form-control-sm" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary btn-sm" type="button" id="button-addon2">Continue</button>
                                        </div>
                                    </div> -->
                                    <div class="other-list">
                                        <el-radio-group v-model="radioPay">
                                            <el-radio :label="1">
                                                支付宝
                                                <svg class="icon" aria-hidden="true" >
                                                    <use xlink:href="#icon-zhifubao"></use>
                                                </svg>
                                            </el-radio>
                                            <el-radio :label="2">
                                                微信
                                                <svg class="icon" aria-hidden="true" >
                                                    <use xlink:href="#icon-weixin"></use>
                                                </svg>
                                            </el-radio>
                                            <el-radio :label="3">
                                                QQ
                                                <svg class="icon" aria-hidden="true" >
                                                    <use xlink:href="#icon-QQ1"></use>
                                                </svg> 
                                            </el-radio>
                                        </el-radio-group>
                                    </div>
                                    <!-- 付款码区域 -->
                                    <div class="payClass">
                                        <div class="pay-img">
                                            <transition name="el-zoom-in-center">
                                                <div v-show="radioPay === 1">
                                                    <img src="../../assets/images/pay/zhifubao.jpg" alt="">
                                                </div>
                                            </transition>
                                            <transition name="el-zoom-in-center">
                                                <div v-show="radioPay === 2">
                                                    <img src="../../assets/images/pay/weixin.jpg" alt="">
                                                </div>
                                            </transition>
                                            <transition name="el-zoom-in-center">
                                                <div v-show="radioPay === 3">
                                                    <img src="../../assets/images/pay/qq.jpg" alt="">
                                                </div>
                                            </transition>
                                        </div>
                                    </div>

                                    <hr>
                                    <div class="btn-pay">
                                        <el-button type="primary" size="mini" @click="addOrder">确定付款</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                        <div class="col-md-4">
                            <el-card>
                                <div class="pay-detail">
                                    <h5>价格明细</h5>
                                    <div class="detail">
                                        <div class="detail-title">购物车总计 {{cartList.length}} 项</div>
                                        <div ><strong style="color: orange">￥{{totalPrice}}</strong></div>
                                    </div>
                                    <div class="detail">
                                        <div class="detail-title">运输费用</div>
                                        <div class="detail-amt">免费</div>
                                    </div>
                                    <hr>
                                    <div class="detail">
                                        <div >应付金额</div>
                                        <div ><strong style="color: orange">￥{{totalPrice}}</strong></div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </transition>

                <!-- 成功页面 -->
                <transition name="el-fade-in-linear">
                    <div class="row" v-if="active===4">
                        <div class="col-md-12">
                            <el-card>
                                <div class="success-box">
                                    <!-- 延迟加载区域 -->
                                    <div class="load"
                                        v-show="isPaying"
                                        v-loading="isPaying"
                                        element-loading-text="拼命加载中..."
                                        element-loading-spinner="el-icon-loading"
                                        >
                                    </div>
                                    <!-- 成功提示区域 -->
                                    <div class="tip_success"  v-show="!isPaying">
                                        <i class="el-icon-success icon_success" ></i>
                                        <p>恭喜您，支付成功，祝您生活愉快!<br>您可以在个人中心查看订单。</p>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </transition>
            </div>
            
        </div>

        <common-footer></common-footer>
        
    </div>
</template>

<script>
import CommonHeader from '../../components/Show/CommonHeader'
import CommonFooter from '../../components/Show/CommonFooter'
import { regionDataPlus, CodeToText } from "element-china-area-data";
export default {
    components: {
        CommonHeader,
        CommonFooter
    },
    data() {
        return {
            active: 1,
            // 加载状态管理
            isloading: false,
            // 支付加载
            isPaying: false,
            // 默认支付宝
            radioPay: 1,
            // 购物车列表
            cartList: [],
            productList: [],
            nums: [],
            prices: [],

            // 地区选择器
            options: regionDataPlus,
            selectedOptions: [],
            // 地址详细表单
            detailForm: {
                userId: "",
                receiverName: "",
                receiverMobile: "",
                receiverProvince: "",
                receiverCity: "",
                receiverDistrict: "",
                receiverAddress: "",
                receiverZip: "",
            },
            addArr:[],
            selectAddress: null,    // 选中地址
            selectAdd:'',
            isForm: false,
            opName: '添加',
            // 图片服务器地址
            imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',


            orderNumber: '',    // 订单号
            orderItemImg: ''

        }
    },
    computed:{
        // 商品总价格
        totalPrice(){
            var totalP = 0
            for(var i=0; i<this.nums.length; i++){
                totalP += this.nums[i] * this.prices[i]
                console.log(this.nums[i])
            }
            return totalP
        }
    },
    methods: {
        // 改变步骤
        changeActive(num){
            if(num === 4){
                this.isPaying = true
                setTimeout(()=>{
                    this.isPaying = false
                }, 2000)
            }
            this.active = num
        },

        // 获取购物车列表
        async getCartList(){
            this.isloading = true
            const {data:res} = await this.$http.get('/cart/searchAll')
            console.log('购物车列表:', res)
            if(res.code === 200){
                this.nums = []
                this.prices = []
                if(res.data.length === 0) {
                    this.isloading = false
                    return
                }
                this.cartList = res.data.cart.map(item => {
                    this.nums.push(item.quantity)   // 添加数量数组
                    return item
                })
                this.productList = res.data.product.map(item => {
                    this.prices.push(item.price)    // 添加价格数组

                    var Imgs = JSON.parse(item.mainImageUrl)
                    var pic
                    for(var key in Imgs){
                        this.orderItemImg = Imgs[key]
                        pic = this.imgBaseUrl + Imgs[key]
                        break
                    }
                    item.pic = pic
                    // console.log(item.mainImageUrl)
                    return item
                })
            }
            this.isloading = false
        },
        // 编辑购物车商品数量
        async changeNum(num, cid){
            // console.log('改变：', num)
            var query = {
                id: cid,
                quantity: num,
                checked: 1
            }
            const {data:res} = await this.$http.post('/cart/editProduct', query)
            // console.log('编辑购物车项', res)
            if(res.code === 200){
                this.getCartList()
                return this.$message.success('编辑成功！')
            }
        },
        // 删除购物车项
        async delCart(pid, cid){
            // console.log('商品id:',pid, '--购物车id:',cid)
            // console.log('用户id:', this.$store.state.user.userInfo.id)
            var query = {
                uId: this.$store.state.user.userInfo.id,
                pId: pid
            }
            const {data:res} = await this.$http.get(`/cart/delete/${cid}`, {params: {query}})
            console.log('删除购物车项', res)
            if(res.code === 200){
                this.getCartList()
                return this.$message.success('删除成功！')
            }
        },

        // 获取用户地址
        async getAddress(){
            const {data:res} = await this.$http.get('/address/list')
            console.log('获取地址', res)
            if(res.code == 200){
                this.addArr = res.data
            }
        },
        // 得到选择省份
        handleChange(value) {
            var ctt =
                CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
            this.detailForm.receiverProvince = CodeToText[value[0]];
            //   console.log("省份", this.receiverProvince);
            this.detailForm.receiverCity = CodeToText[value[1]];
            this.detailForm.receiverDistrict = CodeToText[value[2]];
            console.log(ctt);
        },
        // 添加新地址
        async addAddress() {
            this.isForm = false
            if(this.detailForm.receiverName === ''){
                return this.$message.warning("收件人不能为空");
            }else if(this.detailForm.receiverMobile === ''){
                return this.$message.warning("收件电话不能为空");
            }else if(this.detailForm.receiverProvince === ''){
                return this.$message.warning("地址信息不能为空");
            }else if(this.detailForm.receiverAddress === ''){
                return this.$message.warning("地址信息不能为空");
            }
            this.isForm = true

            this.detailForm.userId = this.$store.state.user.userInfo.id;
            console.log('添加表单:', this.detailForm)
            const { data: res } = await this.$http.post(
                "/address/insert",
                this.detailForm
            );
            console.log("添加地址:", res);
            if (res.code !== 200) {
                return this.$message.warning("地址信息不能为空");
            }
            //   console.log(this.detailForm);
            this.$message.success("添加地址成功");
            this.getAddress();
            this.isForm = false;
        },
        // 选择地址
        selectChange(value){
            // console.log(value);
            // console.log('地址:', this.addArr)
            this.selectAddress = this.addArr.filter(item => item.id === value)[0]
            console.log('选中地址:', this.selectAddress)
        },
        // 提交订单
        async addOrder(){
            this.changeActive(4)    // 跳到下一个阶段
            // this.getOrderCode()
            const { data: res1 } = await this.$http.get("/order/getOrderNumber");
            if (res1.code !== 200) {
                return this.$message.info("获取订单号失败");
            }
            this.orderNumber = res1.data;

            var orderItemList = []
            for(var i=0; i<this.cartList.length; i++){
                var item = {}
                item.orderNumber = this.orderNumber
                item.productId = this.productList[i].id
                item.productName = this.productList[i].productName
                item.productImage = this.orderItemImg
                item.currentUnitPrice = this.productList[i].price
                item.quantity = this.cartList[i].quantity
                item.totalPrice = item.quantity * item.currentUnitPrice
                orderItemList.push(item)
            }
            let param = {
                orderNumber: this.orderNumber,  // 订单号
                payment: this.totalPrice,  // 实际付款金额，单位：元
                addressId: this.selectAddress.id,   // 地址id
                postage: 0,     // 运费，单位：元
                status: 2,        // 订单状态，0-已取消、1-未付款、2-已付款、3-已发货、4-交易成功、5-交易失败
                paymentType: 1,     // 支付类型 1支付宝
                orderItemList: orderItemList,
            }

            console.log('添加订单参数:', param)
            const { data: res } = await this.$http.post("/order/add", param);
            console.log('购物车添加订单:', res)
            if (res.code !== 200) {
                return this.$message.danger("增加订单地址失败")
            }

        },
        // 获取订单号
        async getOrderCode(){
            const {data:res} = await this.$http.get('/order/getOrderNumber')
            console.log('获取订单号:', res)
            if(res.code === 200){
                this.orderNumber = res.data
            }
        },
        // 启动编辑
        isEdit() {
            if(this.isForm){
                this.opName = '添加'
                // console.log('添加地址')
                this.addAddress()
            }else{
                this.opName = '保存'
            }
            this.isForm = !this.isForm;
        },
        // 取消编辑
        isCansel(){
            this.isForm = false
            this.opName = '添加'
        }

    },
    created(){
        this.getCartList()
        this.getAddress()
    }
}
</script>

<style lang="scss">
.step-box{
    .el-steps--simple{
        background-color: #fff;
    }
    margin-bottom: 20px;
     /deep/.el-step__line{
        background: transparent;
        border-top: 5px dotted;
        top: 50% !important;
        color:#ddd;
        .el-step__line-inner{
          border-width: 0 !important;
        }
     }
    .el-step__icon.is-icon{
        height: 50px;
        width: 50px;
        border-radius: 50%;
        border: 3px solid #409EFF;
        cursor: pointer;
        color: #ccc;
    }
    .is-finish{
        .el-step__icon.is-icon{
            height: 50px;
            width: 50px;
            border-radius: 50%;
            border: 2px solid #409EFF;
            cursor: pointer;
            background-color: #409EFF;
            color: #fff;
        }
        /deep/.el-step__line{
            color:#409EFF;
        }
    }
    .el-step__title.is-finish{
        font-weight: 700 !important;
    }
    .el-step__title.is-process{
        color: #aaa !important;
    }
}

</style>
<style lang="scss" scoped>
.shop-cart-box{
    min-width: 1200px;
    min-height: 550px;
    background-color: #F8F8F8;
    padding: 20px 0;
}
.shop-cart{
    // height: calc(100% - 170px);
    // min-height: 500px;
    width: 1200px;
    margin: 0 auto;
    height: 100%;

}

.mycard{
    transition: all 0.5s;
    margin-bottom: 2rem;
    // box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
}

.mycard:hover{
    transform:translate(0,-10px);
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2);
}
.card-content{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    // height: 200px;
    .item-img{
        padding: 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 240px;
        // border:1px solid red;
        img{
            padding: 1rem 0;
            height: inherit;
            width: 100%;
        }
    }
    .card-body{
        padding: 1rem;
        .item-name{
            font-size: 0.85rem;
            font-weight: 600;
            color: #2C2C2C;
            margin-bottom: 15px;
            p{
                margin: 5px 0px;
                font-size: 0.8rem;
            }
            .item-cate{
                color: #7367F0;
            }
            .item-status{
                color: #28C76F;
                font-weight: 400;
                font-size: 0.75rem;
            }
        }
        .item-quantity{
            p{
                font-weight: 700;
                font-size: 0.875rem;
            }
        }
        .item-bottom{
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 10px;
            .deliver{
                color: #B8C2CC;
                margin-top: 1.8rem;
            }
            .offer{
                color: #28C76F;
            }
        }
    }
    .item-options{
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        border-left: 1px solid #DAE1E7;
        box-sizing: border-box;
        .item-rating-warp{
            position: relative;
            height: 2.5rem;

            .item-rating{
                position: absolute;
                right: 0;
                color: #FFFFFF;
                font-weight: 400;
                background-color: #007bff;
                padding: .15em .35em;
                border-radius: .25rem;
            }
        }
        .item-cost{
            .price{
                font-weight: 700;
            }
            .shop{
                margin-top: 0.5rem;
                margin-bottom: 1rem;
                font-size: 0.8rem;
                color: #B8C2CC;
                i{
                    font-size: 1rem;
                    font-weight: bold;
                }
            }
        }
    }
}

.order{
    font-size: 0.9rem;
    p{margin-top: 0;}
    .order-head{
        border-bottom: 1px solid #DAE1E7;
    }
    .order-content{
        border-bottom: 1px solid #DAE1E7;
        font-size: 0.8rem;
    }
    .order-foot{
        .order-button{transition: all 0.3s;}
        .order-button:hover{
            box-shadow: 0 4px 25px 0 rgba(26, 10, 243, 0.2);
        }
    }
    .grey{
        color: #B8C2CC;
    }
    .green{
        color: #28C76F;
    }
    .perple{
        color: #7367F0;
    }
    .bloder{
        font-weight: 600;
        margin: 0.7rem 0;
    }
    .detail{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        .detail-amt{
            font-weight: 100;
        }
    }

}

.address-title, .pay-title{
    .titleWrap {
        display: flex;
        justify-content: space-between;
    }
    p{
        color: #6c757d!important;
    }
}
.address-detail{
    font-size: 0.9rem;
}
.pay-detail{
    .detail{
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        .detail-title{
            margin-top: 8px;
        }
        .detail-amt{
            color: #28C76F;
        }
    }
}

.addresscontain{
    margin-top: 20px;
    .el-radio{
        width: 100%;
        padding-left: 60px;
    }
}
.isNone {
  display: none;
}
.success-box{
    min-height: 350px;
    padding-top: 50px;
    .load{
        height: 4em;
        font-size: 2.2em;
        padding-top: 50px;
    }
    .tip_success{
        text-align: center;
        .icon_success{
            font-size: 8em;
            color: rgb(68, 196, 36);
        }
        p{
            margin-top:20px;
            font-size:1.0em;
            color: #999;
        }
    }
}
.isEmpyt {
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.other-list{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    .el-radio{
        margin-right: 60px;
    }
    display: flex;
    // justify-content: space-evenly;
    position: relative;
    .icon {
        width: 2em;
        height: 2em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        cursor: pointer;
        position: absolute;
        top: -6px;
        right: -35px;
    }
}
.payClass{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    .pay-img{
        height: 300px;
        width: 280px;
        overflow: hidden;
        border:1px solid pink;
        img{
            height: 300px;
            width: 100%;
        }
    }
    
}
.btn-pay{
    margin-top: 20px;
     display: flex;
    justify-content: center;
    align-items: center;
}
</style>